import {Button, Input, Modal} from "antd";
import TextArea from "antd/es/input/TextArea";

const RoleWriteModal = (props) => {

    const {roleWriteModalParam, closeRoleWriteModal, setRoleWriteModalParam, doAddOrEditRole} = props;

    return (
        <Modal
            open={roleWriteModalParam.visible}
            onCancel={closeRoleWriteModal}
            title={roleWriteModalParam.isEdit ? '编辑角色' : '新增角色'}
            footer={
                <div>
                    <Button danger={true} onClick={closeRoleWriteModal}>
                        取消
                    </Button>
                    <Button
                        color='purple' variant="solid" style={{marginLeft: '15px'}}
                        onClick={doAddOrEditRole}
                    >
                        {roleWriteModalParam.isEdit ? '编辑' : '新增'}
                    </Button>
                </div>
            }
        >
            <div style={{display: 'flex', justifyContent: 'center', marginTop:'30px', marginBottom: '20px'}}>
                <div>
                    {/* 角色名称输入项 */}
                    <div style={{display: 'flex', alignItems: 'center', marginBottom: '10px'}}>
                        <div style={{width: '70px', textAlign: 'right', marginRight: '10px'}}>角色名称：</div>
                        <Input placeholder="请输入角色名称" style={{width: '300px'}}
                               value={roleWriteModalParam.roleInfo.roleName}
                               onChange={(e) => {
                                   setRoleWriteModalParam({
                                       ...roleWriteModalParam,
                                       roleInfo: {
                                           ...roleWriteModalParam.roleInfo,
                                           roleName: e.target.value
                                       }
                                   })
                               }}
                        />
                    </div>

                    {/* 角色描述输入项 */}
                    <div style={{display: 'flex'}}>
                        <div style={{width: '70px', textAlign: 'right', marginRight: '10px'}}>角色描述：</div>
                        <TextArea
                            style={{width: '300px'}}
                            placeholder="请输入角色描述"
                            autoSize={{ minRows: 3, maxRows: 6 }}
                            value={roleWriteModalParam.roleInfo.roleDescription}
                            onChange={(e) => setRoleWriteModalParam({
                                ...roleWriteModalParam,
                                roleInfo: {
                                    ...roleWriteModalParam.roleInfo,
                                    roleDescription: e.target.value
                                }
                            })}
                        />
                    </div>
                </div>
            </div>
        </Modal>
    )
}
export default RoleWriteModal;